<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>视频采集</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- style="justify-content: center;" -->
    <a-row style="margin-top: 10px;">
        <a-card style="width: 98%;">
            <div style="margin: 10px 25px;">
                <a-form-item label="url地址">
                    <a-input v-model="collectForm.url" placeholder="输入影视详情页url" />
                </a-form-item>
                <a-form-item label="采集分类">
                    <a-select v-model="collectForm.cate" :style="{width:'120px'}" placeholder="选择分类">
                        <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" size="small" @click="addUrl">添加到列表</a-button>
                    <!-- <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                        @click="startCollect" :disabled="isDisabled">开始采集</a-button> -->
                </a-form-item>
            </div>
        </a-card>


        <a-card style="width: 98%;margin-top: 5px;">
            <div style="margin: 10px 25px;">
                <a-list :gridProps="{ gutter: 0, span: 8 }" :bordered="false">
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>电视剧待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startTeleplayCollect" :disabled="tcbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in teleplayWaitCollectList">{{li}}</a-list-item>
                        </a-list>
                    </a-list-item>
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>电影待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startMovieCollect" :disabled="mcbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in movieWaitCollectList">{{li}}</a-list-item>
                        </a-list>
                    </a-list-item>
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>动漫待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startAnimationCollect" :disabled="acbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in animationWaitCollectList">{{li}}</a-list-item>
                        </a-list>
                    </a-list-item>
                </a-list>
            </div>
        </a-card>
    </a-row>
</template>


<script>
import { ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import { doCollect } from '../../api/collect';

export default {
    setup() {
        const collectForm = ref({
            url: '',
            cate: '',
        });

        const cateList = ref([
            { id: '电视剧', name: '电视剧' },
            { id: '电影', name: '电影' },
            { id: '动漫', name: '动漫' },
        ]);

        const tcbIsDisabled = ref(false);
        const mcbIsDisabled = ref(false);
        const acbIsDisabled = ref(false);

        const teleplayWaitCollectList = ref([]);
        const movieWaitCollectList = ref([]);
        const animationWaitCollectList = ref([]);

        // 添加链接到待采集列表
        const addUrl = () => {
            if (collectForm.value.url == '') {
                Message.warning('请输入待视频地址');
                return;
            }
            if (collectForm.value.cate == '') {
                Message.warning('请选择采集分类');
                return;
            }
            switch (collectForm.value.cate) {
                case "电视剧":
                    teleplayWaitCollectList.value.push(collectForm.value.url);
                    break;
                case "电影":
                    movieWaitCollectList.value.push(collectForm.value.url);
                    break;
                case "动漫":
                    animationWaitCollectList.value.push(collectForm.value.url);
                    break;

                default:
                    break;
            }
            collectForm.value.url = '';
            collectForm.value.cate = '';
        }

        // 开始电视剧采集
        const startTeleplayCollect = () => {
            if (teleplayWaitCollectList.value.length == 0) {
                return;
            }
            tcbIsDisabled.value = true;
            let data = {
                cate: "电视剧",
                urls: teleplayWaitCollectList.value,
            };
            doCollect(data).then(res => {
                if (res.code == 200) {
                    waitCollectList.value = [];
                    teleplayWaitCollectList.value = false;

                    Message.success("采集完毕");
                }
            }).catch(err => console.log(err));
        }

        // 开始电影采集
        const startMovieCollect = () => {
            if (movieWaitCollectList.value.length == 0) {
                return;
            }
            mcbIsDisabled.value = true;
            let data = {
                cate: "电影",
                urls: movieWaitCollectList.value,
            };
            doCollect(data).then(res => {
                if (res.code == 200) {
                    movieWaitCollectList.value = [];
                    mcbIsDisabled.value = false;

                    Message.success("采集完毕");
                }
            }).catch(err => console.log(err));
        }

        // 开始动漫采集
        const startAnimationCollect = () => {
            if (animationWaitCollectList.value.length == 0) {
                return;
            }
            acbIsDisabled.value = true;
            let data = {
                cate: "动漫",
                urls: animationWaitCollectList.value,
            };
            doCollect(data).then(res => {
                if (res.code == 200) {
                    animationWaitCollectList.value = [];
                    acbIsDisabled.value = false;

                    Message.success("采集完毕");
                }
            }).catch(err => console.log(err));
        }


        return {
            collectForm,
            cateList,
            tcbIsDisabled,
            mcbIsDisabled,
            acbIsDisabled,
            teleplayWaitCollectList,
            movieWaitCollectList,
            animationWaitCollectList,

            addUrl,
            startTeleplayCollect,
            startMovieCollect,
            startAnimationCollect,
        }

    }
}

</script>


<style scoped>
.wait-list-title {
    margin: 10px;
    display: flex;
    justify-content: space-between;
}
</style>